<template>
    <div id="app" class="special" :class="{'page-loading':pageLoading}">
        <scroll-fixed>
            <page-bar>
                <a href="javascript:;" @click="pageBack" slot="left" >
                    <i class="uicon uicon-back"></i>
                    <i class="uicon uicon-back-w"></i>
                </a>
               <div slot="middle" class="top-header">{{info.title}}</div>
               <a href="javascript:;" slot="right" @click="moreConfig.status = true">
                    <i class="uicon uicon-bar-more"></i>
                    <i class="uicon uicon-bar-more-w"></i>
               </a>
            </page-bar>
            <ui-tabs ref="tabs" class="page-nav" :list="tabList" :active="nav" @choose="changeTab"/>
        </scroll-fixed>

            <!-- <a :href="'#section_' + index" v-for="(sec,index) in section" :key="index" :class="{'on':index == page.nav}">
                {{sec.title}}
            </a> -->
        <ui-loading v-if="pageLoading">
            <div slot="content"></div>
        </ui-loading>
         <page-error v-else-if="pageError" @refresh="pageRefresh"></page-error>
         <div v-else>
            <div class="banner">
                <div class="img">
                    <img :src="info.cover_img[0]" alt="">
                    <div class="logo">
                        <img v-if="info.logo_url" :src="info.logo_url" />
                        <span>{{info.source}}</span>
                    </div>
                </div>
                <div class="cont">
                    <p class="tit">{{info.title}}</p>
                    <div class="desc">{{info.describe}}</div>
                </div>
            </div>

            <!-- scriont list -->
            <div class="section-list">
                <div class="section" :class="{'has-more':sec.is_have_data}" v-for="(sec,index) in special_section_list" :key="index" :id="'section_'+index">
                    <div class="tit"><span>{{special_section_list.length}}.{{index + 1}}</span> <p>{{sec.title}}</p></div>
                    <div class="list">
                        <ui-item v-for="item in sec.news_list" :item="item" :key="item.id"></ui-item>
                    </div>
                    <div class="more" v-if="!!sec.is_have_data">
                        <a href="javascript:;" @click="loadMoreSection($event,sec)">
                            <template v-if="sec.page_status == 1">
                                加载中
                            </template>
                            <template v-else>
                                展示更多<i class="uicon uicon-more"></i>
                            </template>
                            
                        </a>
                    </div>
                </div>
            </div><!-- end secgion-list-->
         </div>

        <offline />
        <popup-more :status="moreConfig.status" :config="moreConfig" @report="report_status = true,moreConfig.status=false" @close="moreConfig.status = false" @fav="changeFav" @night="changeNight"></popup-more>

        <ui-report v-if="report_status" :id="info.id" :type="info.type" :title="info.title" @cancel="reportCancel" @done="reportDone"/>
    </div>
</template>
<script>
import Items from '../components/items.vue'
import pageBar from '../components/pagebar.vue'
import scrollFixed from '../components/scrollFixed.vue'
import Tabs from '../components/tabs.vue'
import MoreBox from '../components/morebox.vue'
import pageError from '../components/pageError.vue'
import UILoading from '../components/loading.vue'
import offline from '../components/offline.vue'

import mxReport from '../mixins/report.js'

//过滤item字段
function parseItem(list,vue){
    let result = [];
    list.forEach(child=>{
        if(vue.$utils.unlike.check(child.id)) return;
        let citem = {};
        citem = child;
        citem.type = (()=>{
            switch(child.style_num){
                case 1:
                    return 'special';

                case 2:
                    return 'normal';
                case 3:
                    return 'grid';
                case 4:
                    return 'video';
                case 5:
                    return 'single';
            }
        })();

        if(citem.type !== 'grid'){
            citem.src = child.cover_img[0];
        }else{
            citem.src = child.cover_img;
        }
        citem.is_top = 0;
        citem.is_hot = 0;
        citem.url = child.detail_url;
        citem.source = child.source;
        citem.view = child.browse_total;
        citem.time = vue.$moment(child.issue_time * 1000).fromNow().replace(' ','');
        result.push(citem);
    });

    return result;
}

export default {
    name:'specail',
    components:{
        [Items.name]:Items,
        [pageBar.name]:pageBar,
        [Tabs.name]:Tabs,
        [MoreBox.name]:MoreBox,
        [scrollFixed.name]:scrollFixed,
        [UILoading.name]:UILoading,
        [pageError.name]:pageError,
        [offline.name]:offline,
        
    },
    mixins:[mxReport],
    computed:{
        tabList(){
            let arr = [];
            for(let i =0 ,len = this.special_section_list.length ;i<len;i++){
                arr.push({
                    id:i,
                    name:this.special_section_list[i].title
                })
            }
            return arr;
        }
    },
    watch:{
        tabList(arr,oarr){
            this.$nextTick(()=>{
                this.$refs.tabs.$emit('update',{active:this.nav,list:arr});
            })
        }
    },
    data(){
        return {
            moreConfig:{
                status:false,
                fav:false,
                id:'',
                night:false
            },
            pageLoading:true,
            id:'',
            nav:0,
            pageError:false,
            info:{},
            special_section_list:[]
        }
    },
    mounted(){
        this.$on('pageRefresh',()=>{
            this.pageLoading = true;
            this.loadPage().then(rs=>{
                
            }).catch(e=>{
                this.pageError = true;
            }).finally(()=>{
                this.pageLoading = false;
            })
        })

        let parse = this.$utils.urlFactory.parse(location.search);
        if(parse && parse.id){
            this.id = parse.id;
            this.$emit('pageRefresh');
        }else{
            this.$toast('参数有误').then(()=>{
                history.back();
            })
        }
        window.addEventListener('scroll',this.scrollChangeTag,false);
    },
    destroyed(){
        window.removeEventListener('scroll',this.scrollChangeTag,false);
    },
    methods:{
        pageBack(){
            if(this.$utils.app.isApp){
                location.href = this.$utils.app.link.back;
            }else{
                history.back();
            }
        },
        loadPage(){
            let urlParams = this.$utils.urlFactory.parse(location.search);
            let url = '?ct=news&ac=detail&id=' + this.id;
            if(urlParams.action && urlParams.action == 'preview'){
                url = '?ct=news&ac=detail&id=' + this.id +'&action=preview';
            }
            return this.$http.get(url).then(response=>{
                let {data} = response;
                if(data.code == 0){
                    let rs = data.data;

                    this.info = rs.info;
                    rs.info.detail_url = location.href;
                    //添加历史记录
                    this.$utils.history.set(rs.info);
                    
                    this.info.format_time = this.$moment(this.info.issue_time * 1000).format("MM/DD hh:mm");
                    
                    //是否已经收藏
                    this.moreConfig.fav = !!this.info.is_collect;
                    this.moreConfig.id = this.info.id;
                    let list = [];
                    rs.special_section_list.forEach(item=>{
                        let tmpItem = item;
                        
                        tmpItem.id = item.id;
                        tmpItem.title = item.title;
                        tmpItem.is_have_data = item.is_have_data;
                        if(tmpItem.is_have_data){
                            tmpItem.page_no = 2;
                            tmpItem.page_status = 0;
                        }
                        
                        tmpItem.news_list = parseItem(item.news_list,this);

                        list.push(tmpItem);
                    });
                    this.special_section_list = list;

                }else{
                    let co = this.$toast(data.msg);
                    if(data.code == 5003 || data.code == 5004){
                        co.then(()=>{
                            history.back();
                        })
                    }
                    throw new Error(data.msg);
                }
            }).catch(e=>{
                console.error(e);
                this.$toast(e);
                throw e;
            })
        },
        changeTab(item){
           let section = document.getElementById('section_' + item.id);
           section && section.scrollIntoView(false);
        },
        scrollChangeTag(e){
            let ReacArr = '';
            let winH = window.innerHeight;
            this.tabList.forEach(item=>{
                let rect = document.getElementById('section_'+item.id).getBoundingClientRect().top;
                if(rect >0 && rect < winH){
                    //寻找最接近中间区域的元素
                    if(ReacArr){
                        if(Math.abs(rect - winH/2) < Math.abs(ReacArr.top - winH/2)){
                            ReacArr = {id:item.id,top:rect};
                        }
                    }else{
                        ReacArr = {id:item.id,top:rect};
                    }
                }
            });
            if(ReacArr){
                this.nav = ReacArr.id;
                this.$refs.tabs.$emit('update_slide',ReacArr.id);
            }

        },
        changeFav(flag){
            this.moreConfig.fav = flag;
            this.moreConfig.status = false;
        },
        changeNight(flag){
            this.moreConfig.night = !this.moreConfig.night;
            this.moreConfig.status = false;
        },
        pageRefresh(){
            this.pageError = false;
            this.$emit('pageRefresh');
        },
        loadMoreSection(e,item){
            //0 未加载，1 加载中， 2 没有更多数据
            if(item.page_status >0) return false;
            item.page_status = 1;
            return this.$http.get('?ct=news&ac=section_news_list',{
                params: {
                    page_no:item.page_no,
                    special_id:this.info.id,
                    section_id:item.id,

                }
            }).then(response=>{
                let {data} = response;
                if(data.code == 0){
                    let rs = data.data;
                    if(rs.is_have_data){
                        ++item.page_no;
                    }else{
                        item.page_status = 2;
                        item.is_have_data = 0;
                    }
                    
                    item.news_list = item.news_list.concat(parseItem(rs.list,this));

                }else{
                    let co = this.$toast(data.msg);
                    if(data.code == 5003 || data.code == 5004){
                        co.then(()=>{
                            history.back();
                        })
                    }
                    throw new Error(data.msg);
                }
            }).catch(e=>{
                this.$toast(e);
                throw e;
            }).finally(()=>{
                if(item.page_status !== 2){
                    item.page_status = 0
                }
            })
        }
    }
}
</script>
<style lang="less">
.special {
    background-color:#fff;
    .scroll-fixed:not(.sticky){
        .page-bar {  
             background-color:transparent;
            .uicon-back,
            .uicon-bar-more {
                display: none;
            }

            .uicon-back-w,
            .uicon-bar-more-w {
                display: block;
            }
        }
        .top-header {
            opacity:0;
        }
        .page-nav {
              position: absolute;
            top:-100%;
        }
    }
    .page-bar {
        transition: all .2s;
        .uicon-back-w,
        .uicon-bar-more-w {
            display: none;
        }
    }
    .top-header {
        font-size:35px;
        color:#282828;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;;
    }
    .sticky {
        .top-header {
            opacity:1;
        }
        .page-nav {
            opacity:1;
        }
        .page-bar {
            background-color:#fff;
           
            border-bottom:none;
        }
    }

    .banner {
        margin-top:-82px;
        position:relative;
        padding-top:240px;
        .img {
            position: absolute;
            left:0;
            top:0;
            width:100%;
            height:240px;
            overflow: hidden;
        }
        .logo {
            position:absolute;
            right:24px;
            bottom:30px;
            display: flex;
            justify-content: center;
            align-items: center;
            span {
                font-size:28px;
                color:#fff;
                font-weight: bold;
                font-style: italic;
            }
            img {
                margin-right:10px;
                width:40px;
                height:auto;
            }
        }
        img {
            
            display: block;
            width:100%;
            height:auto;
        }
        .cont {
            padding:44px 24px;
        }
        .tit {
            font-size:44px;
            color:#282828;
            font-weight: bold;
            line-height: 1;
        }
        .desc {
            margin-top:26px;
            font-size:30px;
            color:#919191;
            line-height: 46px;
        }
    }

    .section{
        >.tit {
              
            display: flex;
            align-items: center;            
            font-size:38px;
            color:#282828;
            font-weight: bold;
            line-height: 1;
            padding:0 24px;
            p {
                padding:24px 0;
            }
            span {
                padding:24px 0;
                
                margin-right:14px;
                position:relative;
                &::after {
                    content: "";
                    position: absolute;
                    left:0;
                    width:100%;
                    bottom:0;
                    height:12px;
                    background-color: #a98273;
                    border-radius:10px;
                }
            }
        }
        >.more {
            padding:38px;
            margin:0 30px;
            font-size:30px;
            border-top:1px solid #e3e3e3;
            &,a {
                display: flex;
                justify-content: center;
                align-items: center;
            }
            a {
                color:#5a4640;
                i {
                    margin-left:10px;
                    transform: rotate(90deg)
                }
            }
        }
        & + .section {
            margin-top:62px;
        }
        &.has-more + .section {
            margin-top:30px;
        }
        
    }

    .page-nav {
        transition: opacity .2s;
        opacity: 0;
        width:100%;
        height:74px;
        background-color:#fff;
        white-space: nowrap;
        // overflow-x: auto;
        // -webkit-overflow-scrolling: touch;
        

        a {
            position:relative;
            display: inline-flex;
            height:100%;
            justify-content: center;
            align-items: center;
            padding:0 30px;
            font-size:32px;
            color:#919191;

            &.on {
                color:#282828;
                &::after {
                    content:'';
                    position: absolute;
                    bottom:0;
                    left:0;
                    right:0;
                    width:42px;
                    height:6px;
                    margin:auto;
                    border-radius:10px;
                    background-color:#e64a19;
                }
            }
        }
    }
}
</style>

